<!--  -->
<template>
	<view class="myWrap">
		<view class="topbg">
			<view class="flex_wrap row_between">
				<view class="flex_wrap row_middle">
					<!-- 注释掉点击头像进入修改信息页面 -->
					<u--image :src="
                            userInfo.avatar ||
                            `https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png`
                        " shape="circle" width="112rpx" height="112rpx" />
					<view v-if="isLogin">
						<u--text :text="userInfo.salesmanName || '微信用户'" color="#FFF" size="40rpx" margin="0 30rpx"
							:suffixIcon="
                                memberFlag
                                    ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/11/19/1854de95cafe499a83ccd9968811dd3b.png'
                                    : ''
                            " :iconStyle="memberFlag ? iconStyle : ''" />
						<u--text :text="userInfo.mobile || '--'" color="#FFF" size="28rpx" margin="10rpx 0 0 30rpx" />
					</view>
					<view v-else>
						<u--text text="未登录" color="#FFF" size="40rpx" margin="0 0 0 30rpx" />
					</view>
				</view>
				<view class="flex_wrap row_between" style="width: 44rpx">
					<!-- <u-icon
                        v-if="isLogin"
                        @click="QRcodeFun"
                        name="/static/images/QRcode.png"
                        color="#fff"
                        size="48rpx"
                    /> -->
					<u-icon v-if="isLogin" name="setting" color="#fff" size="42rpx" @click="submitLogin" />
				</view>
			</view>
			<view class="flex_wrap topbg_title">
				<u--text :text="appletName + '为您保驾护航'" color="#FDE0A3" size="28rpx" />
				<view class="topbg_btn" @click="
                        isLogin
                            ? memberFlag
                                ? to_look()
                                : to_beSalesman()
                            : to_login()
                    ">
					{{ isLogin ? statusMap[memberFlag] : "立即登录" }}
				</view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="bottomItem">
				<u-text text="我的服务" color="#3D3D3D" size="34rpx" margin="0 28rpx" bold />
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex"
						@click="toPage(listItem.path,listItem.type)">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="36":height="46"
							labelColor="#3D3D3D" labelSize="35rpx"></u-icon>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="bottomItem" v-if="authority === 'salesman'">
				<u-text text="高级服务" color="#3D3D3D" size="34rpx" margin="0 28rpx" bold />
				<u-grid :border="false" col="4">

					<u-grid-item v-for="(listItem, listIndex) in moreList" :key="listIndex"
						@click="toPage(listItem.path,listItem.type)">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="36":height="46"
							labelColor="#3D3D3D" labelSize="42rpx"></u-icon>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>

					<u-grid-item v-if="showBalance">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :size="30"
							name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/d306662c78f64981b03fbff3678324f6.png"
							labelColor="#3D3D3D" labelSize="28rpx" @click="toBalance()"></u-icon>
						<text class="grid-text">我的余额</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="bottomItem" v-if="userCategory == '5'">
				<u-text text="合资服务" color="#3D3D3D" size="34rpx" margin="0 28rpx" bold />
				<u-grid :border="false" col="4">
					<!-- <u-grid-item
                        v-for="(listItem, listIndex) in list1"
                        :key="listIndex"
                        @click="toPage(listItem.path,listItem.type)"
                    >
                        <u-icon
                            :customStyle="{ paddingTop: 20 + 'rpx' }"
                            :name="listItem.name"
                            :size="30"
                            labelColor="#3D3D3D"
                            labelSize="28rpx"
                        ></u-icon>
                        <text class="grid-text">{{ listItem.title }}</text>
                    </u-grid-item> -->
					<u-grid-item>
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :size="30"
							name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/5045ea2221814196b404f3aab211130d.png"
							labelColor="#3D3D3D" labelSize="28rpx" @click="toGoodsPriceExcel()"></u-icon>
						<text class="grid-text">产品价格</text>
					</u-grid-item>
				</u-grid>
			</view>
			<u-text prefixIcon="phone-fill" iconStyle="width:28rpx;height:28rpx;margin-right:6rpx;"
				text="客服热线400-8596-598" color="#2E3558" size="28rpx" align="center" @click="makePhoneCall" />
		</view>
		<u-popup :show="showQR" mode="center" @close="showQR = false" @touchmove.stop.prevent="() => {}">
				<view>
					<u--image :src="showImgData" width="200px" height="200px"></u--image>
					<u-text text="长按转发或下载" size="32rpx" color="#3D3D3D" align="center" margin="20rpx 0 30rpx" />
				</view>
			</u-popup>
			
			<!-- 二维码弹窗组件 -->
			<qrcode-popup
			  :show="showQRCodePopup"
			  :qrcodeImage="qrcodeImageUrl"
			  title="请前往小程序成为会员"
			  @close="handleQRCodeClose"
			  @save-success="handleQRCodeSaveSuccess"
			  @save-fail="handleQRCodeSaveFail"
			/>
		</view>
</template>

<script>
	import store from "@/store/index.js";
	import {
		mapGetters,
		mapState
	} from "vuex";
	import caches from "@/config/caches.js";
	import {
		genWxMpQrCode
	} from "@/api/orderSalesman.js";
	import {
		enterprise
	} from '@/api/enterprise.js';
	import {
		baseUrl
	} from "@/config/tendIdConfig";
	import {
		getMiniCodeByAppId
	} from "@/api/order.js";
	import {
		getByPhone
	} from "@/api/login.js";
	import QRCodePopup from '@/components/qrcode-popup/qrcode-popup.vue';

	export default {
		components: {
			QRCodePopup,
		},
		computed: {
			...mapState(["authority"]),
			...mapGetters(["userInfo", "isLogin"]),
		},
		data() {
			return {
				iconStyle: {
					marginLeft: "8rpx",
					width: "86rpx",
					height: "36rpx",
				},
				appletName: this.$wxConfig.appName || "十蜂健康",
				statusMap: {
					0: "成为会员",
					1: "查看权益",
				},
				list: [{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/f9c078278d1d425eb9596ddc9a06e042.png",
						title: "我的订单",
						path: "/pages_shop1/order/order_list/index",
						type: '1'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/5045ea2221814196b404f3aab211130d.png",
						title: "服务项目",
						path: "/pages_my/service_usage/index",
						type: '2'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/65cfeb90329249f4bb5c26ae19954548.png",
						title: "十蜂数字人",
						path: "",
						type: '3'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/7cb0436534954625b6599c8424b2cc5d.png",
						title: "蜂币",
						path: "/pages_balance/commission/index",
						type: '4'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/28/1a16639a992f448283be5f456a375cb6.png",
						title: "我的优惠券",
						path: "/pages_coupon/index/index",
						type: '5'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/f22963c37fff422c954effc136047ba7.png",
						title: "我的管家",
						path: "/pages_balance/butler/index",
						type: '6'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/10/20/2828ff60a8254f97aba049c7b25f3b37.png",
						title: "卡包",
						path: "/pages_benefitCard/my_beneifitCard/index",
						type: '14'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/10/20/2828ff60a8254f97aba049c7b25f3b37.png",
						title: "权益卡",
						path: "/pages_card/benefitCard/index",
						type: '14'
					}
				],
				moreList: [{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/3910fdcc2c4042119dfad2ebb6ab2f9c.png",
						title: "客户管理",
						path: "/pages_my/user_manage/userList/index",
						type: '7'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/f9c078278d1d425eb9596ddc9a06e042.png",
						title: "客户订单",
						path: "/pages_shop1/order/order_list/userList",
						type: '18'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/9d28e1e39dcc42df9051cb0d837e7a3b.png",
						title: "团队业绩",
						path: "/pages_activity/invitation/lower",
						type: '8'
					},
					// {
					//     name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/28/ee9ea40c6394495cb1757cf8d6836d4c.png",
					//     title: "我的业绩",
					//     path: "/pages_activity/invitation/index",
					// 	type:'9'
					// },
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/eee6635413c6428f9735718dd653e79c.png",
						title: "客户解读",
						path: "/pages_my1/unscramble/index",
						type: '10'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/856f688c390440d08318b5d6f6f5fb3d.png",
						title: "记事本",
						path: "/pages_balance/laptop/index/index",
						type: '11'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/01/14/04bc4f4718ff4f4c850d641b0898b2b6.png",
						title: "课程",
						path: "/pages_operate/videoPage/moreVideo",
						type: '12'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/e70224687d654af0991871ff3aff49b0.png",
						title: "素材中心",
						path: "/pages/operate/index",
						type: '13'
					},
					{
						name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/67545c8693ba4b5ebeef09c3b02e00c1.png",
						title: "我的会议",
						path: this.memberFlag ||
							this.$store.getters?.authority === "salesman" ?
							"/pages_myMeeting/meeting/index" : "/pages_initiateMeeting/userMetting/index",
						type: '14'
					},
				],
				//         list1: [
				//             {
				//                 name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/e70224687d654af0991871ff3aff49b0.png",
				//                 title: "产品列表",
				//                 path: "/pages_shop1/salesmanGoods/goodsList/index",
				// 	type:'15'
				//             },
				// {
				//     name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/103f78da66b5489fba659a92c02e26fe.png",
				//     title: "业务统计",
				//     path: "/pages_statisticAnalysis/statistics_chart/index",
				// 	type:'16'
				// },
				// {
				//     name: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/05/31/67545c8693ba4b5ebeef09c3b02e00c1.png",
				//     title: "产品统计",
				//     path:'/pages_statisticAnalysis/statistics_chart/index',
				// 	type:'17'
				// },
				//         ],
				appId: this.$appId,
				balance: "",
				lineOfCredit: "",
				userCategory: '', //当前身份
				unit: '', //当前身份团队
				unitId: '', //当前身份团队id
				showBalance: false,
				showQR: false,
					showImgData: "",
					memberFlag: 0,
					viewUserRights: 0, //是否是管理员
					customerId: "",
					customerInfo: {}, //客户信息
					goodsPriceExcel: '',
					showQRCodePopup: false,
					qrcodeImageUrl: "/static/images/wx_show_code.jpg", // 小程序二维码图片路径
					appLogoImage: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png", // 使用app logo作为临时二维码图片
			};
		},
		onShow() {
			this.isLogin && this.getPrice();
		},
		methods: {
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '400-8596-598',
					success: function() {
						console.log("拨打电话成功！");
					},
					fail: function() {
						console.log("拨打电话失败！");
					},
				});
			},
			onShareAppMessage: function() {
				return {
					title: this.$appletName,
					imageUrl: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/11/13/5763e4e9e82d4b428316493e27896679.png",
					path: "pages_my1/beSalesman/index?salesmanId=" + this.customerId,
				};
			},

			// 注释掉点击头像进入修改信息页面的方法
			// goto() {
			// 	uni.$u.route({
			// 		url: "/pages_my/edit_card/index",
			// 	});
			// },
			async toPage(path, type) {
				if (type == '4') {
					uni.$u.route({
						url: `/pages_balance/commission/index?idCardBack=${this.customerInfo.idCardBack || ''}&idCardFront=${this.customerInfo.idCardFront || ''}&bankCardNumber=${this.customerInfo.bankCardNumber || ''}&bankName=${this.customerInfo.bankName || ''}`,
					});
				} else if (type == '3') {
					let token = "";
					const res = await getByPhone({
						source: '十蜂健康小程序跳转注册'
					});
					if (res.code === 200) {
						token = res.data;
					}
					const h5Url = "https://health-h5.oneredhealth.com";
					const queryStr = `token=${encodeURIComponent(token)}`;
					const fullUrl = `${h5Url}?${queryStr}`;
					uni.navigateTo({
						url: `/pages/webview/index?url=${encodeURIComponent(fullUrl)}`,
					});
					// uni.navigateToMiniProgram({
					// 	appId: "wx78222dd79fa05607",
					// 	path: "", // 不填默认首页
					// 	extraData: {},
					// 	success(res) {
					// 		// 打开成功
					// 	},
					// });
				} else if (type == '8') {
					if (this.userCategory == '2' || this.userCategory == '3' || this.userCategory == '4' || this
						.userCategory == '5') {
						uni.$u.route({
							url: "/pages_activity/invitation/lower",
							params: {
								unit: this.viewUserRights ? this.$wxConfig.appName : this.unit,
								userCategory: this.userCategory,
								unitId: 0,
							},
						});
						// }else if(this.userCategory == '2'){
						// 	uni.$u.route({
						// 	    url: "/pages_activity/invitation/lower?unit=" + this.unit,
						// 	});
					} else {
						uni.$u.toast('您当前身份暂无团队！');
					}
				} else {
					uni.$u.route({
						url: this.isLogin ? path : "/pages/user/phone/indexAppApp",
					});
				}

			},

			toBalance() {
				uni.navigateTo({
					url: "/pages_balance/balance/index?balance=" +
						this.balance +
						"&lineOfCredit=" +
						this.lineOfCredit,
				});
			},
			getPrice() {
				const token =
					this.$store.getters?.customer_token ||
					uni.getStorageSync("customer_token");
				const that = this;
				uni.request({
					url: baseUrl + "/customer/customer/getCustomerInfoByToken",
					method: "GET",
					header: {
						Authorization: token,
					},
					success(res) {
						if ([991, 992, 401].includes(res.data.code)) {
							uni.$u.toast(res.data.msg);
							that.$store.commit("SET_LOGOUT");
							uni.redirectTo({
								url: "/pages/user/phone/indexAppApp",
							});
							return;
						}
						if (res.data.code === 200) {
							that.balance = res.data.data.balance;
							that.customerId = res.data.data.id;
							that.customerInfo = res.data.data;
							that.memberFlag = res.data.data.memberFlag; //0客户  1会员
							that.lineOfCredit = res.data.data.lineOfCredit;
							that.userCategory = res.data.data.userCategory;
							that.viewUserRights = res.data.data.viewUserRights;
							that.unit = res.data.data.groupName;
							that.unitId = res.data.data.id //客户身份得id;
							if (that.lineOfCredit !== 0 || that.balance !== 0) {
								that.showBalance = true;
							}
						}
					},
				});
			},
			QRcodeFun() {
				const that = this;
				const params = {
					page: "pages/counselling/index",
					scene: that.userInfo.id,
					env_version: __wxConfig.envVersion,
					check_path: false,
					appId: that.appId,
				};
				getMiniCodeByAppId(params).then((res) => {
					if (res.code === 200 && res.data) {
						that.showQR = true;
						var showImgData = res.data;
						that.showImgData = "data:image/png;base64," + showImgData;
					}
				});
			},

			submitLogin() {
				uni.showModal({
					title: "提示",
					content: "确定退出登录吗？",
					success: function(res) {
						if (res.confirm) {
							store.commit("SET_LOGOUT");
							uni.reLaunch({
								url: "/pages/user/phone/indexApp",
							});
						} else if (res.cancel) {}
					}.bind(this), //可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
				});
			},
			to_beSalesman() {
                    // 显示二维码弹窗，引导用户到小程序成为会员
                    this.showQRCodePopup = true;
                    return;
                    
                    uni.navigateTo({
                        url: "/pages_my1/beSalesman/index",
                    });
                },
			to_login() {
				this.$store.commit("SET_LOGOUT");
				uni.navigateTo({
					url: "/pages/user/phone/indexApp"
				});
			},
			to_look() {
					uni.navigateTo({
						url: `/pages_my1/beSalesman/indexYes`,
					});
				},
				
				// 二维码弹窗相关方法
				handleQRCodeClose() {
					this.showQRCodePopup = false;
				},
				
				handleQRCodeSaveSuccess() {
					console.log('二维码保存成功');
				},
				
				handleQRCodeSaveFail(error) {
					console.log('二维码保存失败:', error);
				},
			},
	};
</script>
<style>
	page {
		height: 100% !important;
		background: #f7f7f7 !important;
	}
</style>
<style lang="scss" scoped>
	//@import url(); 引入公共css类

	.myWrap {
		width: 100%;
		height: 100%;
		background: #f7f7f7;

		.topbg {
			height: 288rpx;
			background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/7a6d8167f56649f797842594d75f77ac.png");
			background-size: cover;
			background-position: center center;
			padding: 40rpx 48rpx 0;

			&_title {
				padding: 64rpx 30rpx 0 86rpx;
			}
		}

		.bottomBox {
			padding: 28rpx;
		}

		.bottomItem {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 28rpx 0 40rpx;
			margin-bottom: 28rpx;
		}
	}

	.topbg_btn {
		width: 140rpx;
		height: 46rpx;
		background: linear-gradient(270deg, #fde0a3 0%, #fdedd2 100%);
		border-radius: 46rpx;
		font-size: 24rpx;
		line-height: 46rpx;
		text-align: center;
		color: #4e3607;
	}
</style>